<template>
  <div class="song-list">
    <!-- 歌单详情 -->
    <van-nav-bar
        title="标题"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />
    <!-- 歌单顶部 -->
    <div class="header">
      <img :src="song.logo" alt=""/>
      <h3>{{ song.dissname }}</h3>
      <div class="nick">
        <img :src="song.headurl" alt=""/>
        <span>{{ song.nickname }}</span>
      </div>
      <span>播放量：{{ song.visitnum | numFilter(1) }}万</span>
    </div>
    <!-- 歌曲列表 -->
    <div class="list">
      <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
      >
        <!-- <van-cell v-for="(item, index) in list" :key="index" /> -->
        <div v-for="(item, index) in songlist" :key="index">
          <h4>{{ item.name }}</h4>
          <div class="singer">
            <span v-for="(singerItem, index) in item.ar" :key="index"
            >{{ singerItem.name }}
              <span v-show="index != item.ar.length - 1"> / </span>
            </span>
            <span v-show="item.albumname">
              <span>·</span>
              <span>{{ item.albumname }}</span>
            </span>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      song: {
        logo: "", //歌单logo
        dissname: "", //歌单名称
        headurl: "", //歌单头像
        nickname: "", //歌单制作者名称
        visitnum: 0, //播放量
      },
      songlist: [], //歌曲列表
      songnum: 0, //歌曲数量
      list: [],
      loading: false,
      finished: false,

      tracks: []
    };
  },
  created() {
    this.getListData();
  },
  methods: {
    getListData() {
      this.$request("get", "/playlist/detail", {id: this.$route.params.id}).then((res) => {
        console.log(res);
        this.song.logo = res.playlist.coverImgUrl;
        this.song.dissname = res.playlist.name;
        this.song.headurl = res.playlist.creator.avatarUrl;
        this.song.nickname = res.playlist.creator.nickname;
        this.song.visitnum = res.playlist.playCount;
        this.songnum = res.playlist.trackCount;
        this.songlist = res.playlist.tracks;
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求

      this.list = this.list.concat(this.songlist.splice(0, 10));

      // 加载状态结束
      this.loading = false;

      // 数据全部加载完成
      if (this.list.length >= this.songnum) {
        this.finished = true;
      }

    },
  },
};
</script>
<style scoped>
.header > img {
  width: 50%;
  border-radius: 1rem;
}

.nick {
  overflow: hidden;
  display: flex;
  justify-content: center; /**弹性布局内容水平居中 */
  align-items: center; /**弹性布局内容垂直居中 */
  margin-bottom: 1rem;
}

.nick > img {
  width: 2rem;
  border-radius: 50%;
  margin-right: 0.5rem;
}

.nick > span {
  height: 2rem;
  /* display: block; */
  font-size: 0.8rem;
  line-height: 2rem;
}

.header > span {
  font-size: 0.9rem;
}

.list h4 {
  text-align: left;
}

.singer {
  text-align: left;
}

.singer span {
  color: rgb(147, 147, 147);
  font-size: 0.8rem;
}

.singer > span:last-child > span:first-child {
  color: red;
  font-weight: 900;
  padding: 0 0.5rem;
}

.list {
  margin: 0 1rem;
}
</style>
